<template>
  <div>
    <!-- 2.创建图表容器 -->
    <div ref="container" style="height: 150px"></div>
  </div>
</template>
<script>
// 1.引入折线图构造函数
import { Line } from '@antv/g2plot'
// 引入get方法 ES6模块化规范
import { get } from '@/utils/request'
// 1.引入momentjs commonjs 
let moment = require('moment');
// 引入状态辅助函数
import {mapState} from 'vuex'
export default {
  data() {
    return {
      // 存放温度数据
      tempData: [],
      // 图表实例
      line:null
    }
  },
  computed:{
    // 映射公共数据
    ...mapState(['ed'])
  },
  watch:{
    // 监听设备变化
    async ed(){
      let res = await get('/dashboard/pageQueryData',{
        page:1,
        pageSize:50,
        engineer_id:this.ed.engineer_id,
        device_id: this.ed.device_id
      });
       res.data.list.forEach((item,index,arr) => {
        // (需要格式化的时间) (格式化时间的格式)
        item.insert_time = moment(item.insert_time).format('HH:mm');
        arr[0].temperature=15.4;
        // temp.push(arr[0],arr[19],arr[39],arr[59],arr[79],arr[99])
      });
      this.tempData = res.data.list;
      // 重新根据新数据绘制图表
      this.line.changeData(this.tempData);
    }
  },
  methods: {
    moment,
    // 获取温度数据 
    async getTempData() {
      let res = await get('/dashboard/pageQueryData', {
        page: 1,
        pageSize: 100,
        engineer_id: 2,
        device_id: 1
      });
      // [{insert_time,tempature},{},{},{}]
      res.data.list.forEach((item,index,arr) => {
        // (需要格式化的时间) (格式化时间的格式)
        item.insert_time = moment(item.insert_time).format('HH:mm');
        arr[0].temperature=15.4;
        // temp.push(arr[0],arr[19],arr[39],arr[59],arr[79],arr[99])
      });
      this.tempData = res.data.list;
      this.loadCharts();
      // console.log(res,'获取响应');
    },
    // 加载图表实例
    loadCharts() {
      // 3.创建图标实例 
      const line = new Line(this.$refs.container, {
        data: this.tempData,
        padding: 'auto',
        stepType:'hvh ',
        xField: 'insert_time',
        yField: 'temperature',
        renderer: 'svg',
        limitInPlot: true,
        connectNulls:false,
        isStack:false,
          yAxis: {
          // 刻度间距
          tickInterval:10,
          // tickMethod(){
          //   var positions = [0,10,15,20,35,45];
          //   return positions
          // },
          tickCount: 5,
          label: {
            style: {
              fontFamily: "TencentSans",

              fill: 'white',
              fontSize: 16
            }
          }
        },
        xAxis: {
          label: {
            rotate: -45,
            style: {
              fill: 'white',
              fontSize: 16
            }
          }
        },
      });

      // 4.渲染图表
      line.render();
      // 此时就可以获取到图表实例
      this.line = line;
    }
  },
  mounted() {
    this.getTempData();
    // this.loadCharts();
  }
}
</script>